<!DOCTYPE html>
<html>
<head>
	<script src="../../deps/jquery-1.7.1.js"></script>
	<script src="../../deps/raphael-min.js"></script>
	<script type="text/javascript" src="../../rm.js"></script>
<title>Raphael markup - exporting any raphaël paper instance to XML</title>
</head>
<body>

<p>show basic examples on how to make templates. here in the raphael document
we first define a template that will be a set with a lot of random circles inside.
the user can control some things about these circle creation using template parameters.</p>
<p>Then the template is used tree times, the last time using shorted syntax.</p>
<p>Also there are some styling rules affecting the two last template generated shapes. </p>

<raphael style="display: none">
	
<template name="strange1">

<!-- 	with use-tag we can define a custom tag for use our template  -->
	<use-tag name="strange1-tag"></use-tag>

	<!-- 	define our template first. this tempalte 
	is a strange set with random circles inside  -->	

	<!-- parameter definitions, are optional, 
	here we put it for informative porpuses and for default values -->
	
	<template-arg name="cx" value="100"></template-arg>
	<template-arg name="cy" value="100"></template-arg>
	<template-arg name="size" value="100"></template-arg>
	<template-arg name="circleCount" value="10"></template-arg>	
	<template-arg name="circleMaxRadius" value="10"></template-arg>	
	
	<!-- this is the hard part of the template definition:
	1) First of all, all template parameters will be of type string,
	so we may need to cast them to numbers.
	2) Inside a scriptlet {% .. %} we must scape all &lt; and &amp;, for example in 
	"for(var i=0; i&lt;circleCount; i++) {"-->
	<template-body>
		<set class="strange1">
			{%
			circleCount=parseInt(circleCount);
			size=parseInt(size);
			circleMaxRadius=parseInt(circleMaxRadius);
			cx=parseInt(cx);
			cy=parseInt(cy);
			for(var i=0; i&lt;circleCount; i++) { %}
				&lt;circle cx="{%= cx+rm.randomBetween(-size/2, size/2)%}"
					cy="{%= cy+rm.randomBetween(-size/2, size/2)%}"
					fill="{%=rm.randomColor()%}"
					r="{%=rm.randomBetween(2, circleMaxRadius)%}"
					stroke-width="2" stroke="{%=rm.randomColor()%}">&lt;/circle>
			{%}%}	
		</set>
	</template-body>
</template>

<!-- now deifne the paper with some shapes and then use our template: -->

<paper x="10" y="100" width="600" height="600">

	<rect x="20" y="30" width="100" height="200"></rect>
	<rect x="200" y="30" width="100" height="200"></rect>
	<circle cx="20" cy="300" radius="20" stroke="red"></circle>
	
	<set class="set1">
		<circle cx="220" cy="300" radius="40" stroke="red"></circle>
		<rect x="333" y="130" width="20" height="40"></rect>
		<ellipse x="333" y="330" rx="20" ry="40"></ellipse>
	</set>
	
	<!-- now call our template -->
	<template-use id="strangeShape1" name="strange1">
		<template-arg name="cx" value="100"></template-arg>
		<template-arg name="cy" value="100"></template-arg>
		<template-arg name="size" value="140"></template-arg>
		<template-arg name="circleCount" value="150"></template-arg>
		<template-arg name="circleMaxRadius" value="8"></template-arg>		
	</template-use>
	
	<template-use id="strangeShape2" name="strange1">
		<template-arg name="cx" value="300"></template-arg>
		<template-arg name="cy" value="200"></template-arg>
		<template-arg name="size" value="100"></template-arg>
		<template-arg name="circleCount" value="80"></template-arg>
		<template-arg name="circleMaxRadius" value="8"></template-arg>		
	</template-use>
	
<!-- 	<use also support a short syntax using attributes. But be carefull using this,  -->
<!-- 	because you cannot name your parameters "id", "class" or "name" -->
	<template-use class="strange1Class1" name="strange1" 
		cx="150" cy="320" size="160" circleCount="78" circleMaxRadius="50"></template-use>
		
		
		or use the tag defined with use-tag eleent in template definition:
		<strange1-tag class="strange1Class1" name="strange1" 
		cx="250" cy="220" size="160" circleCount="78" circleMaxRadius="50"></strange1-tag>
</paper>

<style>

paper rect { 
	fill: blue;  
	stroke-width: 10;
} 
.set1 {
	fill: yellow;
}
.set1 circle { 
	fill: black; 
	stroke: red; 
	stroke-width: 4; 
}
#strangeShape2 * {
	fill:red;
}
.strange1Class1 * {
	fill: blue;
	stroke-width: 10
}
</style>

</raphael>


<script type="text/javascript">

var rdoc = rm.render()[0];
// alert(rdoc.find(".set1 circle").size())

</script>

</body>
</html>